<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <!-- 循环 -->
        <h5 class="title">{{ isCollapse ? "后台" : "通用后台管理系统" }}</h5>
        <template v-for="(item, index) in listData">
          <el-menu-item :index="item + index" :key="item + index" v-if="!item.children" @click="routerChange(item)">
            <i :class='item.icon'></i>
            <span slot="title">{{ item.routerlabel }}</span>
          </el-menu-item>
          <!-- 其他 -->
          <el-submenu :index="item + index" v-else :key="item + index + 1">
            <template slot="title">
              <!-- <i :class='`el-icon-${item.icon}`'></i> -->
              <i :class='item.icon'></i>
              <span>{{ item.routerlabel }}</span>
            </template>
            <el-menu-item :index="'1-' + items + index" v-for=" (items, index) in item.children" :key="items + index"
              @click="routerChange(items)">{{ items.routerlabel }}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
// import Cookies from 'js-cookie';
export default {
  name: "MyAside",
  data() {
    return {
      // 菜单的接口
      listData: [
        {
          "uid": "RT-3dgko1184lw8dxtb33dgko1184lw8dxtb4",
          "routername": "home",
          "routerpath": "/home",
          "Frouter": "one",
          "routerlabel": "首页",
          "routerurl": "Home",
          "icon": "el-icon-s-home"

        },
        {
          "name": "user",
          "routerlabel": "用户管理",
          "icon": "el-icon-s-custom",
          "children": [
            {
              "uid": "RT-3dgko12s8lw8eggd73dgko12s8lw8eggd8",
              "routername": "rolemoudles",
              "routerpath": "/rolemoudles",
              "Frouter": "user",
              "routerlabel": "角色模板",
              "routerurl": "rolemoudles",
            },
            {
              "uid": "RT-3dgko130klw8ehabx3dgko130klw8ehaby",
              "routername": "userlist",
              "routerpath": "/userlist",
              "Frouter": "user",
              "routerlabel": "用户列表",
              "routerurl": "userlist"
            },
            {
              "uid": "RT-3dgkoyfglw8eoysn3dgkoyfglw8eoyso",
              "routername": "roleorz",
              "routerpath": "/roleorz",
              "Frouter": "user",
              "routerlabel": "权限分配",
              "routerurl": "roleorz"
            }
          ]
        },
        {
          "name": "goods",
          "routerlabel": "产品管理",
          "icon": "el-icon-s-claim",

          "children": [
            {
              "uid": "RT-3dgko133slw8f4f3w3dgko133slw8f4f3x",
              "routername": "goodadd",
              "routerpath": "/goodadd",
              "Frouter": "goods",
              "routerlabel": "新品发布",
              "routerurl": "goodadd"
            },
            {
              "uid": "RT-3dgkofe0lw8et5zf3dgkofe0lw8et5zg",
              "routername": "goodlist",
              "routerpath": "/goodlist",
              "Frouter": "goods",
              "routerlabel": "商品列表",
              "routerurl": "goodlist"
            }
          ]
        },
        {
          "name": "order",
          "routerlabel": "订单管理",
          "icon": "el-icon-s-check",
          "children": [
            {
              "uid": "RT-3dgkollwlw8ecok43dgkollwlw8ecok5",
              "routername": "statistics",
              "routerpath": "/statistics",
              "Frouter": "order",
              "routerlabel": "订单统计",
              "routerurl": "statistics"
            },
            {
              "uid": "RT-3dgkopk8lw8ee70b3dgkopk8lw8ee70c",
              "routername": "returnorder",
              "routerpath": "/returnorder",
              "Frouter": "order",
              "routerlabel": "售后管理",
              "routerurl": "returnorder"
            },
            {
              "uid": "RT-3dgkoxe4lw8ebwnx3dgkoxe4lw8ebwny",
              "routername": "manage",
              "routerpath": "/manage",
              "Frouter": "order",
              "routerlabel": "订单列表",
              "routerurl": "manage"
            }
          ]
        },
      ],
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 跳转路由
    routerChange(item) {
      if (this.$route.path !== item.path && !(this.$route.path === "/home" && (item.path === "/"))) {
        this.$router.push(item.routerpath);
        // 跳转路由时候给面包屑添加数据            
      }
      // 将数据添加到仓库
      this.$store.commit("ISTABLIST", item)
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },
  mounted() {
    // 路由动态化---达到控制权限
    // console.log(Cookies.get('menuList'))
    // this.listData = JSON.parse(Cookies.get('menuList')) || this.$store.state.login.List;
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  height: 100vh;
  margin: 0;
}

.title {
  color: #fff;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  font-weight: 400;
}
</style>